<template>
	<view class="content">
		<my-home class="home-float" v-if="floatData.open == 1" :floatData="floatData" :floatX="floatX" :floatY="floatY"
			:floatFrom="19"></my-home>
		<view class="tips-top">
			{{top_text}}
		</view>
		<view class="title" v-if="option == 1">
			<u-tabs :list="titleList" active-color="#0DA297" :is-scroll="false" :current="current"
				@change="handleChange"></u-tabs>
		</view>
		<!--banner-->
		<view class="banner" v-if="bannerList.length">
			<u-swiper bg-color="#fff" :list="bannerList" border-radius="0" img-mode="scaleToFill"
				indicator-pos="bottomLeft" height="160" :circular="false" @click="handleBannerClick"></u-swiper>
		</view>

		<template v-if="from==5">
			<view class="forecast-title" v-if="title">{{title}}</view>
		</template>

		<template v-else>
			<view class="arrears" v-if="arrearsData.tt">
				<text>{{arrearsData.startText}}</text><text>{{arrearsData.tt}}</text><text>,{{arrearsData.endText}}</text>
			</view>
		</template>
		<view class="phone-card" v-if=" current == 1 || option == 3">
			<u-form-item class="phone-item">
				<u-input class="phone-input" placeholder="输入手机号码" maxlength="11" type="number" :clearable="false"
					v-model="phone" :custom-style="phoneInput" />
			</u-form-item>
			<view class="phone-tips">
				{{middle_text}}
			</view>
		</view>
		<view v-if="tips" class="tips">
			{{tips}}
		</view>
		<view class="titles"><text>请选择</text><text class="balance" v-if="balance">{{balance}}</text></view>
		<view class="list">
			<view
				:class="{item:true,itemNew:(jumpChange === false  && index==0 && arrearsData.tt) || (jumpChange === true  && index == 1 && arrearsData.tt  ),    imgactive:item.open == 1,redactive:((jumpChange === false && currentIndex==0 && index==0 && arrearsData.tt && from==4) || (jumpChange === true && currentIndex==1 && index == 1 && arrearsData.tt && from==4)) , active:currentIndex==index && item.open != 1 , }"
				@click="handleListClick(index,item)" v-for="(item,index) in list" :key="index" :style="{padding:jump_config.open == 1 && item.open == 1 ? '24rpx 0 0 0' : '' }">
				<view class="jumpParent" v-if="jump_config.open == 1 && item.open == 1">
					<image class="jump-img"  :src="item.pic" @click="handleImgClick"></image>
					<view class="power" style="color: transparent;"><text>88</text><text>元</text></view>
					<view
						:class="{money:true}"  style="color: transparent;">
						12.5元
					</view>
				</view>
				<view class="" v-else-if="item.custom_open == 1">
					<view class="power"><text>自定义</text><text style="color: transparent;">{{item.describe}}</text></view>
					<view
						class="money" style="font-weight: 900;color:#0da297;">
						金额
					</view>
				</view>
				<view class="" v-else>
					<view class="power"><text>{{item.money/100}}</text><text>{{item.describe}}</text></view>
					<view
						:class="{money:true,moneyNew:(jumpChange === false && index==0 && arrearsData.tt) || (jumpChange === true && index == 1&& arrearsData.tt && from==4)}">
						{{item.yuan}}
					</view>
					<!--可充电标记只有从时间选择页面过来的才显示-->
					<view class="rechargeable" v-if="from==5 && item.tagShow">可充电</view>
				</view>
			</view>
			<u-mask :show="showMoney">
				<view class="warp">
					<view class="money-input">
						<view class="money-text1">
							温馨提示
						</view>
						<view class="money-ipt">
							<u-input v-model="money"    placeholder="请输入自定义金额" input-align="center" type="number" :clearable="false"
								:border="true" maxlength="10" @input="TypeInput($event)">
								
								</u-input>
								<view class="money-span">元</view>
						</view>
						<view class="money-text2">
							{{custom_text}}
						</view>
						<view class="money-btn">
							<view class="btn-left" @click="customClose">
								取消
							</view>
							<view class="btn-right" @click="$u.throttle(handlePayClick,3000,true)" >
								<u-loading class="btn-loading" mode="circle" v-if="customLoading"></u-loading>
								{{ customLoading ? '充值中...' : '立即充值'}}
							</view>
						</view>
					</view>
				</view>
			</u-mask>
		</view>
		<view class="des" v-if="des">
			<view class="des-title">活动说明</view>
			<view class="des-content">
				<rich-text :nodes="des"></rich-text>
			</view>
		</view>
		<guarantee />
		<view class="bottom-safe-area"></view>
		<view class="btn">
			<view>
				<!-- <view class="btnFn" @click="handlePayClick">
					<u-loading class="btn-loading" mode="circle" v-if="loading"></u-loading>
					{{loading == true ? '充值中' : '立即充值'}}
				</view> -->
				<uv-btn :loading="loading" @click="handlePayClick" text="立即充值" loading-text="支付中..."></uv-btn>
			</view>
			<view class="bottom-safe-area"></view>
		</view>

		<!-- 客服电话 -->
		<view class="contents">
			<view class="telephone-wrap">
				<view class="telephone">
					<view @click="handlePhoneClick(phone1)"><text>全国客服电话：</text><text>{{phone1}}</text></view>
				</view>

				<view class="bottom-safe-area"></view>
			</view>
		</view>
		<!-- 	<view class="customer-service">
			全国客服电话：<text class="customer-service-text">4006888919</text>
		</view> -->
		<!--单悬浮客服-->
		<common-drag />
		<!--首页活动弹窗-->
		<common-popup :show="activityPopupShow" :da="popupData" @img-click="handleActivityClick" :img="activityImg"
			@close="handleCloseClick" />
	</view>
</template>
<script>
	export default {
		data() {
			return {

				//天天币列表的标题文字
				listTitle: '',
				//banner
				bannerList: [],

				currentBanner: {},
				//从时间选择页面因为钱不够来的预估金额提示文字和最小充值金额
				minMoney: null,
				title: '',
				current: 0,
				titleList: [{
					name: '自己充值'
				}, {
					name: '为他人充值'
				}],
				//欠费处的所有文字内容。
				arrearsData: {
					startText: '',
					endText: "",
					tt: "", //具体的欠费天天币字符串
					money: "",
					yuan: '',
				},

				// list
				list: [],
				currentIndex: null,
				loading: false,
				customLoading: false,
				//describe
				des: '',
				//tips
				tips: '',
				//balance
				balance: '',
				from: '',
				floatData: {},
				floatX: 340,
				floatY: 50,
				clientHeight: null,
				// phone
				phone: '',
				// option 1显示自己充值和为他人充值 2 显示为自己充值 3 显示为他人充值
				option: '',
				// top_text 顶部title
				top_text: '',
				middle_text: '',
				// 跳转外部链接
				jump_config: {},
				jumpChange: false,
				//img
				activityImg: '', //活动弹窗的图片
				activityPopupShow: false, //通用活动弹窗
				popupData: {},
				activityData: {},
				phone1: this.$phone,
				// money
				money: null,
				showMoney: false,
				custom_price: null,
				custom_text: '',
			}
		},
		onLoad(options) {
			if (options.from) {
				this.from = options.from;
				if (this.from == 5) {

					this.minMoney = options.money;
					this.title = options.title;
				};
			};
			this.getDataRequest();
			this.getClineHeight();
		},
		watch: {
			current: {
				handler(newValue, oldValue) {
					if (newValue == 0) {
						this.phone = '';
					}
				},
				immediate: true
			},

		},
		methods: {
			TypeInput(e, val) {
				const inputType = /[^\d]/g; //想限制什么类型在这里换换正则就可以了
				this.$nextTick(function() {
					this.money = e.replace(inputType, '');
				})
			},
			// 拨打客服电话
			handlePhoneClick(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			getBarHeight() {
				const res = uni.getSystemInfoSync()
				if (res.platform === 'ios') {
					return 44 + res.statusBarHeight
				} else if (res.platform === 'android') {
					return 48 + res.statusBarHeight
				} else {
					return 0;
				}
			},
			customClose() {
				this.showMoney = false;
				this.money = null;
				this.currentIndex = null;
			},
			//获取可视区域高度
			getClineHeight() {
				const res = uni.getSystemInfo({
					success: (res => {
						this.clientHeight = res.windowHeight - uni.upx2px(80) - this.getBarHeight();
						this.floatY = this.clientHeight - 50;
					})
				});
			},
			// 第一个按钮直接跳转
			handleImgClick() {
				this.currentBanner = {
					originalData: this.jump_config,
					from: '16',
				};
				this.$u.debounce(this._bannerDebounce, this.$debounceTime, true);
			},
			_bannerDebounce() {
				this.$utils.oldCommonJump(this.currentBanner);
			},
			handleChange(index) {
				this.current = index;
			},
			getDataRequest() {
				this.$u.api.getRechargeData().then(res => {
					if (res.result_code == 300) {
						this.floatData = res.data.window;
						//天天币列表的标题文字
						this.listTitle = res.data.text_return.info;
						//banner
						let arr = res.data.active;
						let len = arr.length;
						let bannerList = [];
						for (let i = 0; i < len; i++) {
							let json = {

								image: arr[i].img,
								//接口的原始数据，
								originalData: arr[i],
							};
							bannerList.push(json);
						};
						this.bannerList = bannerList;
						//tips
						this.tips = res.data.tips;
						//option
						this.option = res.data.option;
						//top_text
						this.top_text = res.data.top_text;
						this.middle_text = res.data.middle_text;
						//balance
						this.balance = res.data.balance;
						//list
						let list = res.data.money_list;
						//jump_config
						this.jump_config = res.data.jump_config;
						//custom_open
						this.custom_price = res.data.custom_price;
						this.custom_text = res.data.custom_text;
						if (res.data.custom_open == 1) {
							list.push({
								custom_open: res.data.custom_open
							})
						}
						// pupop
						this.isCommonPopup = res.data.pop_up.length > 0;
						if (res.data.pop_up.length > 0) {
							this.activityImg = res.data.pop_up[0].img;
							let obj = res.data.pop_up[0];
							let activity = {
								image: obj.img,
								originalData: obj,
							};
							this.activityData = activity;

						};
						//需要弹弹窗时要把弹窗中其它数据要先给弹窗组件传递进去。
						if (this.isCommonPopup) {
							this.activityPopupShow = true;
							this.popupData = {
								txt: res.data.pop_up[0].popup,
								from: 1, //给弹窗组件里面传，区分是哪个页面的弹窗，首页1，时间选择页面弹窗2;
								abc: res.data.pop_up[0]
									.index, //给弹窗组件里面传，啥意思不知道凑活传;
								time: res.data.pop_up[0].times, //弹窗中倒计时时间
							};
						};
						//arrears
						if (this.jump_config && this.jump_config.open == 1) {
							this.jumpChange = true
							list.unshift(res.data.jump_config);
							if (list[1].type == "1") {
								this.arrearsData = {
									startText: res.data.debt_money.begin,
									endText: res.data.debt_money.end,
									tt: res.data.debt_money.describe,
									money: list[1].money,
									yuan: list[1].yuan,
								};
								this.currentIndex = 1;
							};
						} else {
							if (list[0].type == "1") {
								this.arrearsData = {
									startText: res.data.debt_money.begin,
									endText: res.data.debt_money.end,
									tt: res.data.debt_money.describe,
									money: list[0].money,
									yuan: list[0].yuan,
								};
								this.currentIndex = 0;
							};
						}

						if (this.from == 5) {
							//当用户从时间选择页面来因为钱不够充值时，根据后端预估的最小金额，把列表中所有大于最小金额
							//的都打上可充电标记tagShow
							list.forEach(val => {
								val.tagShow = parseInt(val.money) >= parseInt(this.minMoney) ? true :
									false;
							});
						};

						this.list = list;
						//descript
						// #ifdef	MP-WEIXIN
						if (res.data.descript) {
							this.des = res.data.descript.replace(/(^\s+)|(\s+$)|\s+/g, '<br />');
						};

						// #endif
						//*支付宝
						// #ifdef	MP-ALIPAY
						if (res.data.descript) {
							this.des = this.$parseHtml(res.data.descript.replace(/(^\s+)|(\s+$)|\s+/g, '<br />'));
						};
						// #endif

					} else {

						this.$utils.toast(res.msg);
					};
				}).catch(() => {});
			},
			//banner
			handleBannerClick(index) {
				this.currentBanner = {
					originalData: this.bannerList[index].originalData,
					from: '9',
				};
				this.$utils.oldCommonJump(this.currentBanner);
			},
			//list
			handleListClick(index, item) {
				if (item.custom_open == 1) {
					this.showMoney = true;
				}
				this.currentIndex = index;
				/* this.money = null; */
			},
			handlePayClick() {
				if (this.currentIndex == null) {
					this.$utils.toast('请选择');
				} else {
					if (this.current == 1) {
						if (this.$utils.isAllEmpty(this.phone)) {
							this.$utils.toast('手机号不能为空');
						} else if (!this.$utils.isPhone(this.phone)) {
							this.$utils.toast('手机号格式不正确');
						} else if (this.money && this.money <= 0) {
							this.$utils.toast('自定义金额必须大于0');
						} else if (this.money && (Number(this.money) > Number(this.custom_price))) {
							this.$utils.toast('自定义金额不能大于' + 'this.custom_price'+'元');
						} else {
							this.paymentRequest();
						}
					} else {
						if (this.money && this.money <= 0) {
							this.$utils.toast('自定义金额必须大于0');
						} else if (this.money && (Number(this.money)> Number(this.custom_price))) {
							this.$utils.toast('自定义金额不能大于' + this.custom_price+'元');
						} else {
							this.paymentRequest();
						}

					}


				};
			},
			paymentRequest() {
				if (!this.showMoney) {
					this.loading = true;
				} else {
					this.customLoading = true;
				}


				if (this.currentIndex !== null && !this.showMoney) {
					var money = this.list[this.currentIndex].money;
				} else if (this.money) {
					var money = this.money * 100;
				}
				uni.login({
					provider: 'weixin',
					success: ret => {
						//create order
						this.$u.api.commonPay({
							phone: this.phone,
							code: ret.code,
							member: 1,
							fee: money,
						}).then(res => {

							if (res.result_code == '314') {
								let resOrderId = res.data.order_id;
								let tradeNO = res.data.trade_no; //支付宝支付需要的tradeNO
								if (resOrderId) {

									uni.requestPayment({
										//微信
										// #ifdef	MP-WEIXIN
										provider: 'wxpay',
										timeStamp: res.data.timeStamp,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										signType: 'MD5',
										paySign: res.data.paySign,
										// #endif
										//支付宝
										// #ifdef	MP-ALIPAY
										provider: 'alipay',
										orderInfo: tradeNO,
										// #endif

										success: (resultData) => {


											// #ifdef	MP-ALIPAY
											if (resultData?.resultCode == 6001 ||
												resultData?.resultCode == 6002) {
												//Payment failed
												this.$utils.modal({
													title: '提示',
													content: '支付失败',
													showCancel: false,
													callback: (bool) => {
														this.loading = false;
														this.customLoading =
															false;
													}
												});
												return false;
											};
											// #endif	

											//Check if payment is successful
											this.$u.api.checkPaymentSuccess({
												order_id: resOrderId,

											}).then((retu) => {
												if (retu.result_code == '300') {

													//payment successful
													let from = this.from;
													if (from == '5') {

														//刷新
														this.$u.api.portOpen({
															str: uni
																.getStorageSync(
																	'mainStr'
																),

														}).then(result => {
															if (result
																.result_code ==
																'300') {
																this.customLoading =
																	false;
																this.loading =
																	false;
																//运维电话
																this.$u
																	.vuex(
																		'maintain_phone',
																		result
																		.data
																		.operator_phone
																	);
																//更新
																uni.setStorage({
																	key: 'coreData',
																	data: result
																		.data,
																	success: () => {

																		uni.setStorageSync(
																			'isRefresh',
																			0
																		);
																		this.$utils
																			.back();
																	}
																});
															} else {
																this.$utils
																	.modal({
																		title: '提示',
																		content: result
																			.msg,
																		showCancel: false,
																		callback: (
																			bool
																		) => {
																			this.customLoading =
																				false;
																			this.loading =
																				false;
																		}
																	});
															};
														}).catch(() => {
															this.customLoading =
																false;
															this.loading =
																false;
														});

													} else if (from == '4' ||
														from == '') {

														//关闭所有页面跳转至首页
														uni.reLaunch({
															url: "/pages/index/index"
														});
														this.loading = false;
													};
												} else {
													this.$utils.modal({
														title: '提示',
														content: retu.msg,
														showCancel: false,
														callback: (
															bool) => {
															this.customLoading =
																false;
															this.loading =
																false;
														}
													});
												};
											}).catch(err => {
												this.customLoading = false;
												this.loading = false;
											});

										},
										fail: () => {

											//Payment failed
											this.$utils.modal({
												title: '提示',
												content: '支付失败',
												showCancel: false,
												callback: (bool) => {
													this.customLoading = false;
													this.loading = false;

												}
											});

										}
									});
								};
							} else {
								this.$utils.modal({
									title: '提示',
									content: res.msg,
									showCancel: false,
									callback: (bool) => {
										this.customLoading = false;
										this.loading = false;
									}
								});

							};
						}).catch(() => {
							this.customLoading = false;
							this.loading = false;
						});

					}
				});
			},
			//通用活动弹窗
			handleActivityClick() {

				this.$utils.oldCommonJump({
					...this.activityData,
					from: '17'
				});
			},
			handleCloseClick() {
				this.activityPopupShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home-float {
		position: fixed;
		z-index: 99;
		bottom: 100rpx;
		right: 50rpx;
	}

	.list {
		padding: 0 1.66% 200rpx;
		/* display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		text-align: center; */
	}

	.item {
		text-align: center;
		display: inline-block;
		overflow: hidden;
		width: 30%;
		margin: 0 1.66%;
		padding: 24rpx 0;
		margin-bottom: 30rpx;
		border: 2rpx solid #0DA297;
		border-radius: 20rpx;
		color: #0DA297;
		font-size: 30rpx;
		position: relative;
	}

	.itemNew {
		text-align: center;
		display: inline-block;
		overflow: hidden;
		width: 30%;
		margin: 0 1.66%;
		padding: 24rpx 0;
		margin-bottom: 30rpx;
		border: 2rpx solid red;
		border-radius: 20rpx;
		color: red;
		font-size: 30rpx;
		position: relative;
	}

	.item.active,
	.item.active .money {
		background-color: #0DA297;
		color: #fff;
	}

	.title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.titles {
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: 500;
		padding-bottom: 40rpx;
		color: #333333;
	}

	.power {
		padding-bottom: 10rpx;
	}

	.power text:nth-child(1) {
		font-size: 40rpx;
		font-weight: bold;
	}

	.power text:nth-child(2) {
		font-size: 24rpx;
	}

	.money {
		font-size: 28rpx;
		color: #666666;
	}

	.moneyNew {
		font-size: 28rpx;
		color: red;
	}

	.btn {
		background: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 80rpx;
		padding-bottom: 24rpx;
		z-index: 99;
	}

	.btnFn {
		margin: 0 auto;
		width: 96%;
		height: 100rpx;
		background: linear-gradient(180deg, #50DFD8 0%, #2BA59F 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;
		font-size: 36rpx;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}

	.list-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 52rpx;
		height: 52rpx;
	}

	.btn-loading {
		margin-right: 5rpx;
	}

	.red-item {
		border-color: red;
		color: red;
	}

	.red-item .money {
		color: red;
	}

	.redactive {
		background-color: red !important;
		color: #fff !important;
		border-color: red !important;
	}

	.redactive .money {
		color: #fff !important;
		background-color: red !important;
	}

	.arrears {
		color: #333;
		font-size: 32rpx;
		padding: 30rpx;
		padding-bottom: 0;
	}

	.forecast-title {
		color: #333;
		font-size: 28rpx;
		padding: 0 30rpx;

	}

	.arrears text:nth-child(2) {
		color: red;
	}

	.des {
		padding: 30rpx;
		padding-bottom: 40rpx;
	}

	.des-title {
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
	}

	.des-content {
		line-height: 40rpx;
		font-size: 26rpx;
	}

	.tips {
		line-height: 44rpx;
		font-size: 26rpx;
		color: #e41818;
		padding: 20rpx 30rpx;

	}

	.balance {
		padding-left: 8rpx;
		font-size: 26rpx;
		color: #d3a72b;
		font-weight: 600;
	}

	.rechargeable {
		width: 90rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 10rpx;
		background-color: red;
		position: absolute;
		right: -10rpx;
		top: -16rpx;
		color: #fff;
	}

	/* old */
	.tips-top {
		width: 100%;
		background: #FFEBDC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF6B00;
		line-height: 60rpx;
		text-align: center;
	}

	.phone-card {
		overflow: hidden;
		padding-left: 20rpx;
		margin: 0 auto;
		width: 90%;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
	}

	.phone-input {
		width: 70%;
	}

	.phone-tips {
		margin: 20rpx 0;
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FF6B00;
	}

	.imgactive {
		border: none;
		padding: 0;
	}
	.jumpParent {
		position: relative;
		height: 100%;
		padding: 26rpx 0;
		}
	.jump-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.telephone-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 99;
		background-color: #fff;
	}

	.telephone {

		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: #333;
		padding: 20rpx 30rpx;
	}

	.telephone view text:nth-child(2) {
		color: #0DA297;
	}

	.telephone>view {
		padding: 10rpx 0;
	}

	.u-input--border {
		margin-top: 20rpx !important;
	}

	.u-input__input {
		margin: 0 auto 10rpx;
		width: 80% !important;
	}

	/* .input {
		margin: 0 auto 10rpx;
		width: 80% !important;
	} */
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	u-mask {
		z-index: 9999999 !important;
	}

	.money-input {
		width: 80%;
		/* height: 300rpx; */
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.money-text1 {
		margin: 30rpx 0;
		text-align: center;
	}

	.money-ipt {
		position: relative;
		margin: 20rpx auto 0;
		width: 80%;
	}
	.money-span {
		position: absolute;
		width: 5rpx;
		height: 70rpx;
		line-height:70rpx ;
		top: 0;
		right: 40rpx;
	}
	.money-text2 {
		margin: 20rpx 0 0 10%;
		width: 80%;
		color: red;
	}

	.money-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-left {
		margin: 40rpx auto;
		padding: 10rpx 0;
		width: 30%;
		text-align: center;
		background-color: #0DA297;
		color: #fff;
		border-radius: 50rpx;
	}

	.btn-right {
		margin: 40rpx auto;
		padding: 10rpx 0;
		width: 30%;
		text-align: center;
		background-color: #0DA297;
		color: #fff;
		border-radius: 50rpx;
	}
</style>
<style lang="scss">
	page {
		background: #F9F9F9;
	}
</style>